<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: zhangzejun
  Date: 2016/12/8
  Time: 11:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>TestAJAX</title>
    <style type="text/css">
        #btn{margin:0 auto;}
        #thisDiv{width: 1000px;height:500px;}
    </style>
</head>
<body>
    <button id="btn">不点不是中国人</button>

    <div id="thisDiv">

    </div>
   <%-- <tr>
        <th>id</th>
        <th>name</th>
        <th>price</th>
        <th>number</th>
    </tr>
    <c:forEach items="${ItemsList}" var="itemList">
    <tr>
        <td>${itemList.id}</td>
        <td>${itemList.itemname}</td>
        <td>${itemList.itemprice}</td>
        <td>${itemList.itemnum}</td>
    </tr>
    </c:forEach>--%>

<script type="text/javascript" >
    window.onload = function(){
        var btn = document.getElementById('btn');
        btn.onclick = function(){
            var xmlhttp;
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                   /* document.getElementById("thisDiv").innerHTML=xmlhttp.responseText;*/
                   /*for(var i=0;i<xmlhttp.responseText.length;i++){
                        console.log(xmlhttp.response[i]);
                   }*/
                    var _html = '';
                    _html +="<table>"+
                            "<tr>" +
                            "<th>id</th>"+
                            "<th>name</th>"+
                            "<th>price</th>"+
                            "<th>number</th>"+
                            "</tr>"
                    testJson = eval("(" + xmlhttp.response + ")");
                    for(var i=0;i<testJson.length;i++){
                        var temp = "<tr>" +
                                     "<td>"+testJson[i].id+"</td>"+
                                     "<td>"+testJson[i].itemname+"</td>"+
                                     "<td>"+testJson[i].itemprice+"</td>"+
                                     "<td>"+testJson[i].itemnum+"</td>"+
                                "</tr>";
                        _html += temp;
                    }
                    var thisDiv = document.getElementById('thisDiv');
                    thisDiv.innerHTML = _html+"</table>";
                }
            }
            xmlhttp.open("POST","/item/ajax",true);
            xmlhttp.send();
        }
    }
</script>
</body>
</html>
